<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>map</title>
    <script src="flexible.js"></script>
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">
    <style>
        html, body, .app, #container {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .app {
            position: relative;
            font-size: 12px;
        }

        #container {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }

        .app .left-box{
            box-sizing: border-box;
            position: fixed;
            top: 0;
            left: 0;
            right: 100%;
            // bottom: 50%;
            background: #fff;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 0 0.32rem 0.32rem 0;
            /*padding: 0.32rem 0.8rem 0.32rem 0.32rem;*/
            overflow-y:auto;
            transition: all 0.3s;
            height: 8rem;
        }

        .app .left-box.active{
            right: 20%;
        }

        .app .left-box.active-bottom{
            height: 100vh;
        }

        .app .content {
            box-sizing: border-box;
            width: 6.667rem;
            margin: 0.32rem 0.8rem 0.8rem 0.32rem;
        }

        .app .left-box .line {
            width: 0.427rem;
            height: 0.053rem;
            background: #008BD2;
        }

        .app .left-box .title {
            font-size: 18px;
            margin: 0.213rem 0 0.107rem;
        }

        .app .left-box .title-en {
            color: #99AFBB;
            margin-bottom: 0.24rem;
        }

        .app .left-box .desc-box.open{
            height: calc(100vh - 3rem);
        }

        .app .left-box .desc-box .hidden{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 7;
            overflow: hidden;
        }

        .app .left-box .desc {
            font-size: 14px;
            line-height: 24px;
            text-align: justify;
            overflow: hidden;
        }

        .app .left-box .desc.open{
            height: 100%;
            overflow-y: auto;
        }

        .app .left-box .close{
            position: absolute;
            top: 50%;
            right: 0.133rem;
        }

        .app .left-box .close-bottom{
            position: absolute;
            bottom: 0.133rem;
            left: 50%;
            transform: translateX(-50%);
        }

        .app .left-box .close-bottom img{
            transform: translateX(-50%) rotate(-90deg)
        }
        .app .left-box .close-bottom img.close-bottom{
            transform: translateX(-50%) rotate(90deg);
        }

        .app .bottom-box {
            position: absolute;
            width: 10rem;
            height: 9.5rem;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 0.32rem 0.32rem 0px 0px;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 0.427rem;
            box-sizing: border-box;
            bottom: -9.5rem;
            transition: bottom 0.3s;
        }

        .app .bottom-box .close-tag{
            position: absolute;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            top: 10px;
            right: 10px;
            font-size: 14px;
            color: #666;
        }

        .app .bottom-box.active{
            bottom: 0;
        }

        .app .bottom-box .title {
            font-size: 18px;
            font-weight: 500;
            color: #22262F;
            line-height: 36px;
        }

        .app .bottom-box .desc {
            color: #666F81;
            margin: 0.213rem 0;
        }

        .tag-box {
            margin-top: 0.213rem;
        }

        .tag-box .tag {
            padding: 0.133rem 0.147rem;
            background: rgba(255, 139, 9, 0.1);
            border-radius: 8px;
            color: #FF8B09
        }

        .tag-box .tag.green {
            background: rgba(24, 176, 122, 0.1);
            color: #18B07A
        }

        .m-l-24 {
            margin-left: 0.32rem;
        }

        /*3d*/
        .customer-swiper-container {
            width: 9.187rem;
            height: 4.8rem;
            overflow: hidden;
        }

        .customer-swiper-container .swiper-container{
            height: 100%;
        }

        .swiper-slide {
            width: 100%;
            height: 100%;
        }

        .swiper-slide > img{
            width: 100%;
            height: 70%;
            position: relative;
            top:40%;
            transform: translateY(-50%);
        }

        #swiperContainer {
            margin-top: 0.533rem;
        }

        .btn {
            display: inline-block;
            width: 9.187rem;
            height: 1.067rem;
            line-height: 1.067rem;
            background: #008BD2;
            border-radius: 0.213rem;
            color: #fff;
            font-size: 16px;
            text-align: center;
            margin-top: 0.267rem;
            cursor: pointer;
            text-decoration: none;
        }

        .remark-box{
            position: relative;
            width: 1.52rem;
            height: 1.52rem;
        }

        .remark-box img{
            position: absolute;
            width: 1.52rem;
            height: 1.52rem;
        }

        .remark-box .mark-num{
            width: 1.52rem;
            position:absolute;
            color: #fff;
            top:0.36rem;
            font-size: 14px;
            text-align: center;
        }

        /*css样式*/
        [v-cloak] {
            display: none;
        }

        .open-left{
            position: fixed;
            top: 50vh;
            left: 0.267rem;
        }
        .right-box {
            position: fixed;
            z-index: 1000;
            top: calc(50vh - 3rem);
            right: 0;
        }
        .app .right-box .tag{
            padding: 12px 8px;
            background: #fff;
            color: #008BD2;
            font-size: 18px;
            -webkit-writing-mode: vertical-rl;
            writing-mode: vertical-rl;
            margin-bottom: 10px;
            border-radius: 0.2rem;
        }
    </style>
</head>
<body>
<div class="app" id="app" v-cloak>
    <div id="container"></div>
    <div class="open-left" @click="open" v-if="!isShowLeftBox">
        <img src="./images/icon-open.svg" alt="open">
    </div>
    <div class="right-box" v-if="!isShowLeftBox">
        <div class="tag" @click="select('02')">特色产业园</div>
        <div class="tag" @click="select('03')">孵化器</div>
        <div class="tag" @click="select('01')">人才公寓</div>
    </div>
    <div class="left-box" :class="{active:isShowLeftBox,'active-bottom': isShowLeftBoxBottom}">
        <div class="close" @click="close">
            <img src="./images/icon-close.svg" alt="close">
        </div>

        <div class="close-bottom" @click="toggleBottom">
            <img src="./images/icon-close.svg" alt="close" :class="{'close-bottom':isShowLeftBoxBottom}">
        </div>
        <div class="content">
            <div>
                <div class="line"></div>
                <div class="title">园区简介</div>
                <div class="title-en">Business park Profile</div>
            </div>
            <div class="desc-box" :class="{open: isShowLeftBoxBottom}">
                <div class="desc" :class="{open: isShowLeftBoxBottom,hidden: !isShowLeftBoxBottom}">
                    张江科学城的前身是张江高科技园区，1992年7月，张江高科技园区开园，成为第一批国家级新区，面积17平方公里。1999年，上海启动“聚焦张江”战略，张江高科技园区进入了快速发展阶段。2000年，上海市、浦东新区共同成立张江高科技园区领导小组和办公室，园区规划面积调整为25.9平方公里。2007年5月，张江高科技园区管理委员会成立，调整为区政府派出机构。2011至2012年，上海市政府先后同意将张江高科技园区、康桥工业区、国际医学园区、周浦繁荣工业区纳入张江核心园区范围，园区面积达79.7平方公里。2014年12月，中国（上海）自贸区扩区，张江高科技片区37.2平方公里纳入其中；2016年2月，国家发展改革委、科技部批复同意建设张江综合性国家科学中心；2017年7月，上海市政府正式批复原则同意《张江科学城建设规划》，总面积约95平方公里；
                    目前，张江汇聚企业1.8万余家，跨国公司地区总部53家，高新技术企业828家，初步形成了以信息技术、生物医药为重点的主导产业，聚集了中芯国际、华虹宏力、上海兆芯、罗氏制药、微创医疗、和记黄埔、华领医药等一批国际知名科技企业，旨在聚焦重大战略项目，打造世界级的高科技产业集群，引领产业发展。
                </div>
            </div>

        </div>
    </div>
    <div class="bottom-box" v-if="isShowBottomBox" :class="{active:isShowBottomBox}">
        <div @click="closeTag" class="close-tag">X</div>
        <div class="title">{{pointData.title}}</div>
        <div class="desc">
            <span>{{pointData.address}}</span>
        </div>
        <div class="tag-box">
            <span class="tag"
                  v-for="(tag,index) in pointData.tags"
                  :class="{
                    'm-l-24': index > 0,
                    green: index == 1
                  }"
                  :key="index"
            >{{tag}}</span>
        </div>
        <div class="customer-swiper-container">
            <div class="swiper-container" id="swiperContainer">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(img,i) in pointData.images" :key="i">
                        <img :src="img" alt="img">
                    </div>
                </div>
            </div>
        </div>
        <a :href="'./detail.html?id='+ pointData.id + '&type=' + pointData.type " class="btn">查看详情</a>
    </div>
</div>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=6e79f6d236e295632f21b385e363b6e8"></script>
<script src="js/idangerous.swiper.min.js"></script>
<script src="js/idangerous.swiper.3dflow.js"></script>
<!--<script src="js/vue.js"></script>-->
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/commonParams.js"></script>
<script src="js/zjPark84.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                pointData: null,
                allPointList: null,
                isShowBottomBox: false,
                currentPoint: null,
                isShowLeftBox: true,
                isShowLeftBoxBottom: false,
                mySwiper: null
            }
        },
        mounted: function () {
            const _that = this;
            const id = this.getQueryVariable('id')
            const type = this.getQueryVariable('type')
            this.queryData().then(function (res) {
                const data = (getData(res) || []).map(function (item,index) {
                    return {
                        markNum: index+1,
                        position: [item.longitude, item.latitude],
                        currentPoint: item.id,
                        type: '0' + item.flag,
                    }
                })
                _that.allPointList = data;
                _that.initGaodeMap(data);
                if(id && type) {
                    _that.isShowLeftBox = false;
                    _that.renderDetail(type,id);
                }
            });
        },
        methods: {
            closeTag(){
                this.mySwiper = null;
                this.isShowBottomBox = false;
                if(this.getQueryVariable('id')){
                    window.location.search = ''
                }
            },
            getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return false;
            },
            toggleBottom(){
                this.isShowLeftBoxBottom = !this.isShowLeftBoxBottom
            },
            queryData(){
                return axios.get(baseUrl + '/ZJCMS_war/CharacteristicPark/getAllCoordinates')
            },
            queryDetail(type,id){
                let api = ''
                if(type === 1) api = '/TalentApartment/getInfo'
                if(type === 2) api = '/CharacteristicPark/getInfo'
                if(type === 3) api = '/PublicServicePlatform/getInfo'
                return axios.get(baseUrl + '/ZJCMS_war/'+ api +'?id='+id)
            },
            select(type){
                const data = this.allPointList.filter(function (item) {
                    return item.type == type
                })
                this.initGaodeMap(data);
            },
            open: function () {
                this.isShowLeftBox = true
            },
            close: function () {
                this.isShowLeftBox = false
            },
            initGaodeMap: function (data) {
                var _that = this

                var map = new AMap.Map('container', {
                    resizeEnable: true, //是否监控地图容器尺寸变化
                    mapStyle: "amap://styles/whitesmoke",
                    zoom: 11, //初始地图级别
                    center: [121.634055, 31.219888], //初始地图中心点
                });

                map.clearMap();

                data.forEach(function (item) {
                    addMarker(item)
                })

                var geojson = new AMap.GeoJSON({
                    geoJSON: geoJSON,
                    // 还可以自定义getMarker和getPolyline
                    getPolygon: function(geojson, lnglats) {
                        // 计算面积
                        var area = AMap.GeometryUtil.ringArea(lnglats[0])

                        return new AMap.Polygon({
                            path: lnglats,
                            fillOpacity: 1 - Math.sqrt(area / 8000000000),// 面积越大透明度越高
                            strokeColor: 'rgba(0, 139, 210, 0.9)',
                            fillColor: 'transparent',
                            strokeStyle: 'dashed',
                        });
                    }
                });

                geojson.setMap(map);

                //添加marker标记
                function addMarker(options) {
                    // map.clearMap();
                    // 点标记显示内容，HTML要素字符串
                    var markerContent = '' +
                        '<div class="remark-box">' +
                        '   <img src="./images/icon-location'+ options.type +'@2x.jpg">'+
                            '<span class="mark-num">'+options.markNum+'</span>'+
                    '</div>';
                    var marker = new AMap.Marker({
                        map: map,
                        position: options.position,
                        // 将 html 传给 content
                        content: markerContent,
                    });
                    //鼠标点击marker弹出自定义的信息窗体
                    AMap.event.addListener(marker, 'click', function () {
                        _that.renderDetail(options.type,options.currentPoint)
                    });
                }
            },
            renderDetail: function (type,id) {
                var _that = this
                _that.queryDetail(Number(type),id).then(function(res){
                    const {
                        name,
                        address,
                        tags,
                        imgUrl,
                    } = getData(res);

                    const pointData = {
                        title: name,
                        address,
                        tags:Object.values(tags || {}),
                        images: (imgUrl || []).map(function (item) {
                            return baseUrl + '/ZJCMS_war/' + item
                        }),
                        type: Number(type),
                        id: id
                    }

                    _that.pointData = pointData;
                    _that.isShowBottomBox = true;
                    _that.$nextTick(function(){
                        _that.initSwiper();
                        _that.mySwiper.init();
                    })
                })
            },
            initSwiper: function () {
                /*3d 轮播*/
                this.mySwiper = new Swiper('#swiperContainer', {
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper
                    loop: true, //设置为true，则开启loop（环路）模式，默认为false
                    speed: 600,//滑动速度
                    autoplay: 3000,//自动切换的时间间隔（单位ms），不设定该参数slide不会自动切换。
                    autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay，默认为true：停止。
                    // pagination: '.service-product__pagination',
                    // paginationClickable :true,
                    slidesPerView: 2,
                    centeredSlides: true,
                    tdFlow: {
                        rotate: 0,
                        // stretch :-100,
                        depth: 300,
                        modifier: 1,
                        shadows: false
                    }
                });
            }
        }
    })
</script>
</body>
</html>
